<template>
  <div class="views-page">
    <div class="type-top-box">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="状态：">
          <el-select 
            v-model="formInline.status" 
            @change="initData()" 
            placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="已开通" value="1"></el-option>
            <el-option label="未开通" value="0"></el-option>
            <el-option label="离职" value="9"></el-option>
            <el-option label="长假" value="2"></el-option>
            <el-option label="顾问" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select 
            filterable 
            :clearable="!lookParams.ad"
            v-model="formInline.dept" 
            @change="initData()"
            placeholder="请选择">
            <el-option
              v-for="item in deptOptions"
              :key="item.value"
              :label="item.key"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字：">
          <el-input
            v-model="formInline.key"
            @keyup.enter.native="initData()"
            placeholder="请输入关键字搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initData()">查询</el-button>
        </el-form-item>
        <div class="right-outlogin">
          <span class="add-user" v-if="!lookParams.ad" @click="addUser"><i class="el-icon-circle-plus"></i>新增人员</span>
        </div>
      </el-form>
    </div>
    <el-table v-loading="thisLoading" :border="true" :data="tableData" size="small" height="65vh">
      <el-table-column align="center" label="AD账户" width="170">
        <template slot-scope="scope">
          <span class="ad-name" @click="edigthisuserMsg(scope.row.ad)">
            {{scope.row.ad}}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <template slot-scope="scope">
          <span class="user-name">
            {{scope.row.userNm}}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="岗位层级" width="120">
        <template slot-scope="scope">
          <span>
            {{scope.row.posLevel}}-
            {{
              scope.row.posLevel == 1 ? '孔总' :
              scope.row.posLevel == 2 ? '公司领导' :
              scope.row.posLevel == 3 ? '部门负责人' :
              scope.row.posLevel == 4 ? '部门副职' :
              scope.row.posLevel == 5 ? '基层管理者' :
              scope.row.posLevel == 6 ? '普通员工' : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="posSequence" label="纵向序列" width="90"></el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <span>
            {{
            scope.row.status == "1" ? '已开通' :
            scope.row.status == "0" ? '未开通' :
            scope.row.status == "2" ? '长假' :
            scope.row.status == "3" ? '顾问' :
            scope.row.status == "9" ? '离职' : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="directLerderNm" label="直线审批"></el-table-column>
      <el-table-column align="center" prop="specLerderNm" label="虚线审批"></el-table-column>
      <el-table-column align="center" prop="topDept" label="所属部门"></el-table-column>
      <el-table-column align="center" prop="position" label="岗位"></el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.status != '0'"
            @click="handleChange(scope.row,scope.$index,'0')"
          >关闭</el-button>
          <el-button
            type="text"
            class="bule-text"
            v-if="scope.row.status != '1'"
            @click="handleChange(scope.row,scope.$index,'1')"
          >开通</el-button>
          <el-button
            type="text"
            v-if="scope.row.status != '2'"
            @click="handleChange(scope.row,scope.$index,'2')"
          >长假</el-button>
          <el-button
            type="text"
            v-if="scope.row.status != '3'"
            @click="handleChange(scope.row,scope.$index,'3')"
          >顾问</el-button>
          <el-button
            type="text"
            v-if="scope.row.status != '9'"
            @click="handleChange(scope.row,scope.$index,'9')"
          >离职</el-button>
          <el-button  
            type="text" 
            class="grey-text"
            @click="handleApproval(scope.row,scope.$index)"
          >审批关系</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-total">
      <pagination-table
        :total="total"
        :currentPage="pageIndex"
        :pagesize="formInline.pageSize"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
      ></pagination-table>
    </div>
    <!-- 新增人员 -->
    <addedit-user ref="addeditusercom" @initThisData="initData()"></addedit-user>
    <!-- 修改审批关系 -->
    <approval-table ref="approvaltable" @initThisData="initData()"></approval-table>
  </div>
</template>
<script>
import Vue from "vue";
import { alertMessage } from "@/config/myUtil";
import AddEditUser from "./components/add-edit-user";
import ApprovalTable from "./components/approvalTable";
import PaginationTable from "@/components/public/paginationTable";
import { Form, FormItem, Table, TableColumn } from "element-ui";
import { getDatas, chengeEmoperate, deptgetByLoginAd } from "@/api/getData";
import { parse } from 'path';
Vue.use(Form);
Vue.use(Table);
Vue.use(FormItem);
Vue.use(TableColumn);
export default {
  name: "HomeManager",
  components: {
    "addedit-user":AddEditUser,
    "approval-table": ApprovalTable,
    "pagination-table": PaginationTable
  },
  data() {
    return {
      total: 0,
      formInline: {
        dept: "",
        key: "",
        status: "1",
        pageSize: 20,
        pageIndex: 0
      },
      pageIndex: 1,
      tableData: [],
      deptOptions:[],
      lookParams:{key:""},
    };
  },
  computed: {
    thisLoading() {
      return this.$store.state.isLoading;
    }
  },
  mounted() {
    this.$store.dispatch("getThismsgUaa").then((res)=>{
      this.lookParams.ad = res.id;
      var list = res.authorities;
      if(list && list.length > 0){
        list.map((item)=>{
          if(item.authority == "ROLE_SUPERADMIN"){
            delete this.lookParams.ad;
          }
        })
      }
      this.initdepList(this.lookParams);
    });
  },
  methods: {
    async initData(param) {
      this.$store.dispatch("changeLoading", true);
      try {
        if(!param){
          this.formInline.pageIndex = 0;
          this.pageIndex = 1;
          this.total = 0;
        }
        let data = await getDatas(this.formInline);
        this.tableData = data;
        if (data[0]) {
          this.total = data[0].total;
        }else{
          this.total = 0;
        }
        this.$store.dispatch("changeLoading", false);
      } catch (error) {
        console.log(error);
      }
    },
    async initdepList(lookParams) {
      try {
        let data = await deptgetByLoginAd(lookParams);
        var list = data.map(el => {
            return {
              key: el,
              value: el
            };
        });
        this.deptOptions = list;
        if(lookParams.ad && list.length >= 1){
          this.formInline.dept = list[0].value;
        }
        this.initData();
      } catch (error) {
        console.log(error);
      }
    },
    async handleChange(item, index, status) {
      try {
        let data = await chengeEmoperate({
          ad: item.ad,
          status: status
        });
        if (data == 1) {
          alertMessage("修改成功!")
          this.initData();
        } else {
          alertMessage('修改失败，审批关系未处理',"warning");
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 分页
    pageChange(num) {
      this.formInline.pageIndex = num - 1;
      this.initData("set");
    },
    // 改变表格分页条数
    sizeChange(num) {
      this.formInline.pageSize = num;
      this.initData();
    },
    // 新增用户
    addUser(){
      this.$refs.addeditusercom.changestaus();
    },
    // 编辑用户
    edigthisuserMsg(ad){
      this.$refs.addeditusercom.changestaus(ad);
    },
    // 审批关系
    handleApproval(item) {
      this.$refs.approvaltable.changestaus(item);
    },
  }
};
</script>
<style lang="less" scoped>
@import url("./less/manager.less");
</style>